<template>
    <div class="container">
        <!-- 导航栏区域开始 -->
        <TridentNavBar>
            <template #left><i class="iconfont icon-zuojiantou"></i></template>
            <template #default>仅聊天好友</template>
        </TridentNavBar>
        <!-- 导航栏区域结束 -->

        <!-- 搜索区域开始 -->
        <van-search
            v-model="username"
            placeholder="搜索"
            show-action
            class="search-wrap"
        >
            <template #action>
                <div @click="handleSearch">搜索</div>
            </template>
        </van-search>
        <!-- 搜索区域结束 -->

        <!-- 联系人区域开始 -->
        <van-index-bar
            :sticky-offset-top="45"
            highlight-color="#27BA9B"
            :sticky="true"
            class="friend-wrap"
        >
            <div class="friend-box" v-for="(item, index) in list" :key="index" @click="$router.push('/friendDetail?uid='+ index)">
                <van-index-anchor :index="item.title"/>
                <div class="friend-item" v-for="(value, index) in item.items" :key="index">
                    <div class="image-box">
                        <img src="@/assets/images/my_avatar.png" alt="">
                    </div>
                    <div class="username-box">{{value.name}}</div>
                </div>
            </div>
        </van-index-bar>
        <!-- 联系人区域结束 -->

        <!-- 操作区域开始 -->
        <div class="operate-wrap">
            <span @click="handleAdd">添加</span>
            <span @click="$router.push('/contact')">移除</span>
        </div>
        <!-- 操作区域结束 -->

        <!-- 弹层区域开始 -->
        <van-popup
            v-model:show="showPopup"
            position="bottom"
            closeable
            round
            :style="{ height: '20%' }"
        >
            <div class="popup-wrap">
                <p @click="$router.push('/label')">标签</p>
                <p @click="$router.push('/contact')">通讯录</p>
            </div>
        </van-popup>
        <!-- 弹层区域结束 -->
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

import { reactive } from 'vue'

const list = reactive([
    {
        title: 'A',
        items: [
            {
                name: '文本-01'
            },
            {
                name: '文本-02'
            },
            {
                name: '文本-03'
            },
            {
                name: '文本-04'
            },
            {
                name: '文本-05'
            },
            {
                name: '文本-06'
            },
        ]
    },
    {
        title: 'B',
        items: [
            {
                name: '文本-01'
            },
            {
                name: '文本-02'
            },
            {
                name: '文本-03'
            },
            {
                name: '文本-04'
            },
            {
                name: '文本-05'
            },
            {
                name: '文本-06'
            },
        ]
    },
    {
        title: 'C',
        items: [
            {
                name: '文本-01'
            },
            {
                name: '文本-02'
            },
            {
                name: '文本-03'
            },
            {
                name: '文本-04'
            },
            {
                name: '文本-05'
            },
            {
                name: '文本-06'
            },
        ]
    },
    {
        title: 'D',
        items: [
            {
                name: '文本-01'
            },
            {
                name: '文本-02'
            },
            {
                name: '文本-03'
            },
            {
                name: '文本-04'
            },
            {
                name: '文本-05'
            },
            {
                name: '文本-06'
            },
        ]
    }
])

const showPopup = ref(false)

const username = ref('')
const handleSearch = () => {
    console.log('username =', username.value);
}

const handleAdd = () => {
    showPopup.value = true
}
</script>

<style scoped lang="scss">
page,
.container {
    height: 100vh;

    // 内容区域开始
    .search-wrap {
        position: fixed;
        top: 45px;
        left: 0;
        width: 100%;
    }

    // 好友区域开始
    .friend-wrap {
        margin-top: 100px;
        padding-bottom: 55px;
        .friend-box {
            .friend-item {
                padding: 0 15px;
                display: flex;
                align-items: center;
                background-color: #fff;
                

                .image-box {
                    width: 50px;
                    height: 50px;
                    line-height: 50px;
                    border-radius: 5px;
                    text-align: center;
                    overflow: hidden;
                    img {
                        width: 80px;
                        height: 80px;
                    }
                }

                &:last-child .username-box {
                    border-bottom: none;
                }

                .username-box {
                    flex: 1;
                    margin-left: 15px;
                    color: #000;
                    font-size: 18px;
                    border-bottom: 1px solid #EDEDED;
                    padding: 25px 0;
                }
            }
        }
    }

    // 操作区域开始
    .operate-wrap {
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 50px;
        background-color: #EDEDED;
        padding: 0 15px;

        display: flex;
        justify-content: space-between;
        align-items: center;
        span {
            background-color: #06cea3;
            border: 1px solid #ffffff;
            color: #fff;
            height: 35px;
            width: 65px;
            text-align: center;
            line-height: 35px;
            border-radius: 4px;
            &:last-child {
                background-color: red;
            }
        }
    }

    .popup-wrap {
        margin-top: 40px;
        p {
            height: 50px;
            line-height: 50px;
            text-align: center;
            border-top: 1px solid #EDEDED;
        }
    }
}
</style>